<template>
    <div class="comtable">
        <el-table 
            :data="data.records" 
            :border="options.border" 
            :stripe="options.stripe" 
            :highlight-current-row="options.highlight||false"
            :size="options.size||'mini'" 
            style="width: 99.9%" 
            v-loading="loading" 
            @selection-change="handleSelectionChange"
            @current-change="handleCurrentRowChange"
            :row-class-name="tableRowClassName"
            :height='options.height'
            ref="table"
            >
            <!--selection选择框-->
            <el-table-column v-if="options.isSelect" type="selection" align="center" width="50"></el-table-column>
            <!--序号区域-->
            <el-table-column v-if="options.index" label="序号" type="index" align="center" width="65">
                <template slot-scope="scope">
                    <span>{{(pageRequest.pageIndex - 1) * pageRequest.pageSize + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <!--数据列区域-->
            <el-table-column
              :label="item.label"
              :width="item.width ? item.width :''"
              :min-width="item.min_width ? item.min_width :''"
              :show-overflow-tooltip="item.overflow===true ? true : false"
              :align="item.align ? item.align : 'left'"
              :sortable="item.sortable"
              v-for="(item, index) in columns"
              :key="index"
              :fixed="item.fixed"
              :class-name="item.className ? item.className : ''"
            >
                <template slot-scope="scope">

                    <!-- 文本区域 -->
                    <span>{{scope.row[item.prop]}}</span>

                    <!-- 自定义HTML -->
                    <span v-if="item.htmlShift" v-html="item.htmlShift(scope.row, item)"></span>

                    <!-- Link文字链接 -->
                    <el-link v-if="item.link" type="primary" style="font-size:inherit;" :underline="false" @click="handleEvent(item.handle,scope.row)">{{scope.row[item.link]}}</el-link>

                    <!-- 标签区域 -->
                    <el-tag :type="item.type ? item.type : ''" v-if="item.tag">{{scope.row[item.tag]}}</el-tag>

                    <!-- 标签转换区域 -->
                    <span v-if="item.tagShift">
                        <el-tag
                            :type="item.tagsList(scope.row, item).type ? item.tagsList(scope.row, item).type : ''"
                        >{{item.tagsList(scope.row, item).text}}
                        </el-tag>
                    </span>

                    <!-- Switch 开关区域 -->
                    <el-switch
                        v-if="item.switch"
                        v-model="scope.row[item.switch]"
                        :active-color="item.activeColor ? item.activeColor : '#13ce66'"
                        :inactive-color="item.activeColor ? item.activeColor :'#ff4949'"
                        :active-value="item.active"
                        :inactive-value="item.inactive"
                        @change="handleEvent(item.handle, scope.row)"
                    ></el-switch>

                    <!-- 按钮区域 -->
                    <div class="btngroup">
                        <template v-if="item.button">
                            <span v-for="(btn, btnindex) in item.group" :key="btnindex" class="btns">
                                <template v-if="btn.btnShift">
                                    <el-button
                                        :disabled="btn.btnShift(scope.row, item).disabled ? btn.btnShift(scope.row, item).disabled : false"
                                        :style="btn.btnShift(scope.row, item).style ? btn.btnShift(scope.row, item).style : ''"
                                        :type="btn.btnShift(scope.row, item).type ? btn.btnShift(scope.row, item).type : ''"
                                        :size="btn.size ? btn.size : 'small'"
                                        :icon="btn.btnShift(scope.row, item).icon ? btn.btnShift(scope.row, item).icon : ''"
                                        :title="btn.btnShift(scope.row, item).title"
                                        @click="handleEvent(btn.btnShift(scope.row, item).handle,scope.row)"
                                    >{{btn.btnShift(scope.row, item).label}}</el-button>
                                </template>
                                <el-button v-else
                                    :type="btn.type ? btn.type : ''"
                                    :size="btn.size ? btn.size : 'small'"
                                    :icon="btn.icon ? btn.icon : ''"
                                    :title="btn.title"
                                    @click="handleEvent(btn.handle, scope.row, index)"
                                ></el-button>
                            </span>
                        </template>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <!-- <div v-if=" data.records && data.records.length>10 "> -->
            <el-pagination
                :small='true'
                v-if="options.pagination != undefined? options.pagination : true"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageRequest.pageIndex ? pageRequest.pageIndex : 1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageRequest.pageSize ? pageRequest.pageSize : 10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="data.total ? data.total:0"
            ></el-pagination>
        <!-- </div> -->


    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            // pageRequest: {
			// 	page: 1,
            //     size: 10
            // }
        };
    },
    props: {
        data: Object,
        columns: Array,
        options: Object,
        pageRequest: Object,
    },
    watch: {
        data(n) {
            this.loading = false;
            this.$nextTick(()=>{
                this.$refs.table.doLayout()
                if(this.options.highlight) {
                    this.$refs.table.setCurrentRow(n.records[0])
                }
            })
        }
    },
    methods: {
        findPage() {
            // this.loading = true
            let callback = res => {
                this.loading = false
            }
            this.$emit('findPage', {pageRequest: this.pageRequest, callback:callback})
        },
        //分页
        handleSizeChange(size) {
            this.pageRequest.pageSize = size
            this.findPage()
        },
        //换页刷新
        handleCurrentChange(page) {
            this.pageRequest.pageIndex = page
            this.findPage()
        },
        // 单选
        handleCurrentRowChange(val) {
            
        },
        handleEvent(handle, row) {
            this.$emit('handleAction', {'handle':handle, 'row':row})
        },
        handleSelectionChange(val) {
            this.$emit('handleAction', {'handle':'selected', 'row':val})
        },
        tableRowClassName({row, rowIndex}) {
            row.index = rowIndex;
        }
    },
    mounted() {
        if(this.options.initTable) {
            this.handleCurrentChange(1)
        }
    }
};
</script>

<style lang="scss" scoped>

</style>
